
//数据绑定
function bindDatum(){
	var str = "China";
	var body = d3.select("body");
	var p = body.selectAll("p");

	p.datum(str);
    //d 代表数据，也就是与某元素绑定的数据。
	//i 代表索引，代表数据的索引号，从 0 开始。
	p.text(function(d, i){
	    return "第 "+ i + " 个元素绑定的数据是 " + d;
	});
}
function bindData(){
	var dataset = ["I like dog","I like cat"];
	var body = d3.select("body");
	var p = body.selectAll("p");
	p.data(dataset)
	  .text(function(d, i){
	      return d;
	  });
}
function onesvg(){
	var width = 300;  //画布的宽度
	var height = 300;   //画布的高度
	var svg = d3.select("body")     //选择文档中的body元素
	    .append("svg")          //添加一个svg元素
	    .attr("width", width)       //设定宽度
	    .attr("height", height);    //设定高度
	return svg;
}

//矩形
function rect(svg){
	var dataset = [ 250 , 210 , 170 , 130 , 90 ];  //数据（表示矩形的宽度）
	svg.append("rect");
	svg.append("rect");
	var rectHeight = 25;   //每个矩形所占的像素高度(包括空白)
 svg.selectAll("rect")   //选择svg内所有的矩形
    .data(dataset)  //绑定数组
    .enter()        //指定选择集的enter部分
    .append("rect") //添加足够数量的矩形元素.有数据，而没有足够图形元素的时候，使用此方法可以添加足够的元素。
	    .attr("x",20)
	    .attr("y",function(d,i){
	         return i * rectHeight;
	    })
	    .attr("width",function(d){
	         return d;
	    })
	    .attr("height",rectHeight-2)
	    .attr("fill","steelblue");//给矩形元素设置颜色
}
//线性比例尺
function linear_demo(){
	//将 dataset 中最小的值，映射成 0；将最大的值，映射成 300。
	var dataset = [1.2, 2.3, 0.9, 1.5, 3.3];
	var min = d3.min(dataset);
	var max = d3.max(dataset);

	var linear = d3.scale.linear()
	        .domain([min, max])
	        .range([0, 300]);

	linear(0.9);    //返回 0
	linear(2.3);    //返回 175
	linear(3.3);    //返回 300
}
//序数比例尺
function ordinal_demo(){
	//0 对应颜色 red，1 对应 blue，依次类推
	var index = [0, 1, 2, 3, 4];
	var color = ["red", "blue", "green", "yellow", "black"];
	var ordinal = d3.scale.ordinal()
	        .domain(index)
	        .range(color);

	ordinal(0); //返回 red
	ordinal(2); //返回 green
	ordinal(4); //返回 black
}
function rect1(svg){
	var dataset = [ 2.5 , 2.1 , 1.7 , 1.3 , 0.9 ];
	console.log(d3)
	var linear = d3.scaleLinear()
	        .domain([0, d3.max(dataset)])
	        .range([0, 250]);
	var rectHeight = 25;   //每个矩形所占的像素高度(包括空白)

	svg.selectAll("rect")
	    .data(dataset)
	    .enter()//为缺失的元素返回占位符。有5个矩形
	    .append("rect")//给占位符添加元素
	    .attr("x",20)
	    .attr("y",function(d,i){
	         return i * rectHeight;
	    })
	    .attr("width",function(d){
	         return linear(d);   //在这里用比例尺
	    })
	    .attr("height",rectHeight-2)
	    .attr("fill","steelblue");
	svg.selectAll("rect").each(function(d,i){
		console.log(i+":"+d)
	})
	
}
function chart(){
	d3.select('#chart')
	  .selectAll("div")
	  .data([4, 8, 15, 16, 23, 42])
	  .enter()
	  .append("div")
	  .style("height", function(d){
		  console.log(d)
		  return d + "px"
	  });
}
//选择数据
//d3.select("body").selectAll("p").text("www.ourd3js.com");      
bindData();
var body = d3.select("body");
body.insert("p","#myid")
.text("insert p element");
rect1(onesvg())
chart()
